<template>
  <el-table
    :data="tableData"
    max-height="300px"
    :header-cell-style="{ 'text-align': 'center' }"
    @sort-change="handleSortChange"
  >
    <el-table-column prop="gitInstance" label="实例" align="center">
      <template #default="{ row }">
        <span v-if="row.gitInstance === 'beijing'">北京</span>
        <span v-else-if="row.gitInstance === 'chengdu'">成都</span>
        <span v-else>{{ row.gitInstance }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="名称">
      <template #default="{ row }">
        {{ row.name }}
      </template>
    </el-table-column>
    <el-table-column label="URL" align="center">
      <template #default="{ row }">
        <a :href="row.webUrl" target="_blank"><i class="ki-outline ki-wrench"></i></a>
      </template>
    </el-table-column>
    <el-table-column
      prop="commitCount"
      label="本月次数"
      align="right"
      sortable="custom"
      :sort-orders="['descending', 'ascending']"
    >
      <template #default="{ row }">
        <span style="font-variant-numeric: tabular-nums">{{ row.commitCount }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="totalChanges"
      label="本月行数"
      align="right"
      sortable="custom"
      :sort-orders="['descending', 'ascending']"
    >
      <template #default="{ row }">
        <span style="font-variant-numeric: tabular-nums">{{ row.totalChanges }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="allCommitCount"
      label="总次数"
      align="right"
      sortable="custom"
      :sort-orders="['descending', 'ascending']"
    >
      <template #default="{ row }">
        <span style="font-variant-numeric: tabular-nums">{{ row.allCommitCount }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="allTotalChanges"
      label="总行数"
      align="right"
      sortable="custom"
      :sort-orders="['descending', 'ascending']"
    >
      <template #default="{ row }">
        <span style="font-variant-numeric: tabular-nums">{{ row.allTotalChanges }}</span>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    :page-sizes="[10, 20, 50, 100]"
    style="margin-top: 20px"
    @current-change="loadData"
    @size-change="handleSizeChange"
  />
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import ApiService from '@/core/services/ApiService';

const tableData = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const sortBy = ref('totalChanges');
const sortDir = ref('DESC');

const loadData = () => {
  const params = {
    page: currentPage.value,
    size: pageSize.value,
    sortBy: sortBy.value,
    sortDir: sortDir.value,
  };
  ApiService.query('/api/repos', { params })
    .then((res) => {
      tableData.value = res.data.records;
      total.value = res.data.total;
    })
    .catch((error) => {
      console.error('Error loading data:', error);
    });
};

const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  currentPage.value = 1;
  loadData();
};

const handleSortChange = ({ prop, order }) => {
  sortBy.value = prop;
  sortDir.value = order === 'ascending' ? 'ASC' : order === 'descending' ? 'DESC' : '';
  loadData();
};

onMounted(loadData);
</script>
